<style type="text/css">
    #preview{width:255px;height:100px;border:1px solid #000;overflow:hidden;}
    #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
    #preview1{width:265px;height:100px;border:1px solid #000;overflow:hidden;}
    #imghead1 {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<ol class="breadcrumb">
    <li> <i class="fa fa-anchor"></i>
        &nbsp;地区运营管理
    </li>
    <li>添加运营商账号</li>
</ol>

<div class="col-xs-12 info-center" >
    <div class="bs-callout bs-callout-warning">
        <h4>
            系统使用单位: <strong>{:C('COLLEGE_NAME')}</strong>
        </h4>
    </div>
</div>

<div class="col-xs-12 info-center">
    <div class="panel panel-mcit">
        <div class="panel-heading">
            <i class="fa fa-list"></i>
            &nbsp;&nbsp;添加运营商信息添加
        </div>
        <div class="panel-body">
            <div class="alert alert-warning">
                <p><i class="fa fa-paperclip"></i>&nbsp;填写运营商信息【<i class="fa fa-asterisk required-fa"></i>号为必填项】</p>
            </div>
            <form class="mcit-dataform" id="data_form" method="post" action={:U("Operation/addOper")} enctype="multipart/form-data">
                <div class="panel-footer">
                    <div class="panel-mcit">

                        <div class="col-xs-6">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-asterisk required-fa"></i>&nbsp;账号</span>
                                <input type="text" id="login_time"  class="form-control required" name="oper_login_name" placeholder="登录账号">
                            </div>
                        </div>

                        <div class="col-xs-5">
                            <div class="input-group">
                                <span class="input-group-addon">运营商名称</span>
                                <input type="text" id="phone"   name="oper_name" class="form-control" placeholder="运营商名称">
                            </div>
                        </div>
                        <div class="clearfix" ></div>



						<div class="col-xs-6">
							<div class="input-group">
								<span class="input-group-addon">可选地区</span>
								<select id="selectL" name="selectL" multiple="multiple" class="input-sm">
									<volist name="oper.outareas" id="vo">

									<option value="{$vo.id}">{$vo.city}({$vo.area})</option>

									</volist>

								</select>
							</div>
							
							<div class="select_opt">
								<p id="toright" title="添加">&gt;</p>
								<p id="toleft" title="移除">&lt;</p>
							</div>
							<div class="input-group">
								<span class="input-group-addon">已选地区</span>
								<select id="selectR" name="selectR" multiple="multiple">
									<volist name="oper.inareas" id="vo">

									

									</volist>

								</select>
							</div>

						</div>

						

                        <div class="col-xs-5">
                            <div class="input-group">
                                <span class="input-group-addon">详细地址</span>
                                <input type="text" id="address"  name="address" class="form-control" placeholder="详细地址">
                            </div>
                        </div>
                        <div class="clearfix" ></div>

                        <div class="col-xs-6">
                            <div class="input-group">
                                <span class="input-group-addon">顶部背景色</span>
                                <input type="hidden"  name="background" class="demo form-control" value="#1EA3E8">
                            </div>
                        </div>

                        <div class="col-xs-5">
                            <div class="input-group">
                                <span class="input-group-addon">顶部字体颜色</span>
                                <input type="hidden"  name="color" class="demo form-control" value="#ffffff">
                            </div>
                        </div><div class="clearfix" ></div>

                        <div class="col-xs-6">
                            <div class="input-group">
                            <span class="input-group-addon">
                                <span class="btn">顶部logo</span>
                                <div id="preview" style="border: 0">
                                    <img id="imghead"  src='<%=request.getContextPath()%>/images/defaul.jpg'>
                                </div>
                            </span>
                                <input type="file"  onchange="previewImage(this)"  name="logo" style="margin-left:5px;margin-top: 30%;align-items: center">
                            <span class="help-block">
                                    <i class="fa fa-hand-o-up"></i>
                                    &nbsp;格式仅限'jpg', 'gif', 'png', 'jpeg'类型。尺寸：119*48，高固定
                                </span>
                            </div>
                        </div>

                        <div class="col-xs-5">
                            <div class="input-group">
                            <span class="input-group-addon">
                                <span class="btn">顶部头像</span>
                                <div id="preview1" style="border: 0">
                                    <img id="imghead1"  src='<%=request.getContextPath()%>/images/defaul.jpg'>
                                </div>
                            </span>
                                <input type="file"  onchange="previewImage1(this)"  name="portrait" style="margin-left:5px;margin-top: 30%;">
                            <span class="help-block">
                                    <i class="fa fa-hand-o-up"></i>
                                    &nbsp;格式仅限'jpg', 'gif', 'png', 'jpeg'类型。尺寸：32*33
                                </span>
                            </div>
                        </div><div class="clearfix" ></div>

                        <div class="col-xs-6">
                            <button type="submit" id="addbase" class="btn btn-warning"><i class="fa fa-upload"></i>&nbsp;添加</button>
                            <a href="javascript:history.go(-1);" class="btn btn-warning"><i class="fa fa-mail-reply"></i>&nbsp;返回</a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<import file="js.jquery#chained" />
<import type='css' file="js.minicolors.jquery#minicolors" />
<import file="js.minicolors.jquery#minicolors#min" />
<import file="js.maskedinput" />
<script>
    $(document).ready(function () {
        $("#location-s").chained("#location-f");
    });

    $("#data_form").ajaxForm({
        dataType:'json',
        clearForm:true,
        beforeSubmit:function(){
       
	            if($("#login_time").val()==''){
	                alertify.error("请填写登录账号及所属地区");
	                return false;

	            }
	            
            return true
        },
        success:function(data){
            if(data.state==100){
                alertify.success(data.msg);
                location.href = data.url;
            }else{
                 alertify.error(data.msg);  
                 alert (data.msg); 
                
            }
        }
    });
</script>
<script>
    $(document).ready( function() {
        $('.demo').each( function() {
            $(this).minicolors({
                control: $(this).attr('data-control') || 'hue',
                defaultValue: $(this).attr('data-defaultValue') || '',
                inline: $(this).attr('data-inline') === 'true',
                letterCase: $(this).attr('data-letterCase') || 'lowercase',
                opacity: $(this).attr('data-opacity'),
                position: $(this).attr('data-position') || 'bottom left',
                change: function(hex, opacity) {
                    var log;
                    try {
                        log = hex ? hex : 'transparent';
                        if( opacity ) log += ', ' + opacity;
                        console.log(log);
                    } catch(e) {}
                },
                theme: 'default'
            });
        });

    });
</script>
<script type="text/javascript">
    //图片上传预览    IE是用了滤镜。
    function previewImage(file)
    {
        var MAXWIDTH  = 255;
        var MAXHEIGHT = 100;
        var div = document.getElementById('preview');
        if (file.files && file.files[0])
        {
            div.innerHTML ='<img id=imghead>';
            var img = document.getElementById('imghead');
            img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
            }
            var reader = new FileReader();
            reader.onload = function(evt){img.src = evt.target.result;}
            reader.readAsDataURL(file.files[0]);
        }
        else //兼容IE
        {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
        }
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = {top:0, left:0, width:width, height:height};
        if( width>maxWidth || height>maxHeight )
        {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if( rateWidth > rateHeight )
            {
                param.width =  maxWidth;
                param.height = Math.round(height / rateWidth);
            }else
            {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }

        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
</script>
<script type="text/javascript">
    //图片上传预览    IE是用了滤镜。
    function previewImage1(file)
    {
        var MAXWIDTH  = 265;
        var MAXHEIGHT = 100;
        var div = document.getElementById('preview1');
        if (file.files && file.files[0])
        {
            div.innerHTML ='<img id=imghead1>';
            var img = document.getElementById('imghead1');
            img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
            }
            var reader = new FileReader();
            reader.onload = function(evt){img.src = evt.target.result;}
            reader.readAsDataURL(file.files[0]);
        }
        else //兼容IE
        {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead1>';
            var img = document.getElementById('imghead1');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead1 style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
        }
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = {top:0, left:0, width:width, height:height};
        if( width>maxWidth || height>maxHeight )
        {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if( rateWidth > rateHeight )
            {
                param.width =  maxWidth;
                param.height = Math.round(height / rateWidth);
            }else
            {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }

        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
</script>


<script type="text/javascript">
$(function(){
    var leftSel = $("#selectL");
	var rightSel = $("#selectR");
	$("#toright").bind("click",function(){		
		leftSel.find("option:selected").each(function(){
			$(this).remove().appendTo(rightSel);
		});
	});
	$("#toleft").bind("click",function(){		
		rightSel.find("option:selected").each(function(){
			$(this).remove().appendTo(leftSel);
		});
	});
	leftSel.dblclick(function(){
		$(this).find("option:selected").each(function(){
			$(this).remove().appendTo(rightSel);
		});
	});
	rightSel.dblclick(function(){
		$(this).find("option:selected").each(function(){
			$(this).remove().appendTo(leftSel);
		});
	});
	
	$("#addbase").click(function(){ 
		var selVal = [];
		
		rightSel.find("option").each(function(){
			selVal.push(this.value);
		});
		selVals = selVal.join(",");
		
		
	      var tmpInput = document.createElement("input"); 
	      tmpInput.type = "text"; 
	      tmpInput.name = "inareas"; 
	      
	     
	      tmpInput.setAttribute("style", "display:none") ; 
	      tmpInput.value = selVals; 
	      

	      
 	     var data_form = document.getElementById("data_form");

	      data_form.appendChild(tmpInput); 
		
/* 	      data_form.method = "post"; 
	      data_form.action = "{:U("Operation/addOper")}";  
	      data_form.submit();   */ 
	}); 
	
	
	

});


</script>

